<template>
  <div v-if="page.total !== undefined" class="app-container">
    <el-input v-model="search" placeholder="搜索农机" />
    <div class="cardList">
      <div
        v-for="(item, i) of list"
        :key="i"
        class="card"
        @click="
          show = true
          card = item
        "
      >
        <el-image
          :src="`/api/v2/public/getImage?id=${item.images ? item.images[0] : ''}`"
          style="width: 160px;"
          fit="cover"
        >
          <div slot="error">
            <el-image :src="require('./tractor.webp')" />
          </div>
        </el-image>
        <div class="info">
          <div>农机类型: {{ item.eq_module }}</div>
          <div>农机型号: {{ item.eq_type }}</div>
          <div>单位: {{ item.dealer_name }}</div>
          <div>制造日期: {{ item.product_date }}</div>
          <div>发动机型号: {{ item.engine_type }}</div>
          <div>发动机编号: {{ item.engine_no }}</div>
          <div>发动机厂家: {{ item.engine_company }}</div>
        </div>
      </div>
    </div>
    <el-pagination
      :page-size.sync="page.size"
      :total="page.total"
      :current-page.sync="page.page"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="getDeviceList"
      @current-change="getDeviceList"
    />

    <el-dialog :visible.sync="show" width="1000px" :title="card && card.eq_module">
      <el-image :src="`/api/v2/public/getImage?id=${card && card.images[0]}`" style="width: 160px;" fit="cover" />
      <el-tabs v-model="activeTab" @tab-click="onTabClick">
        <template v-if="card">
          <el-tab-pane v-for="(tab, i) of tabs" :key="i" :label="tab.label" :name="tab.id">
            <div>
              <div>农机类型: {{ card.eq_module }}</div>
              <div>农机型号: {{ card.eq_type }}</div>
              <div>单位: {{ card.dealer_name }}</div>
              <div>制造日期: {{ card.product_date }}</div>
              <div>发动机型号: {{ card.engine_type }}</div>
              <div>发动机编号: {{ card.engine_no }}</div>
              <div>发动机厂家: {{ card.engine_company }}</div>
            </div>
            <div v-if="activeTab === tabs[1].id && card.otherInfo">
              <div>发动机转速: {{ card.otherInfo.engine_speed }}</div>
              <div>发动机水温: {{ card.otherInfo.engine_temp }}</div>
              <div>机油压力: {{ card.otherInfo.jiyou_yali }}</div>
              <div>机油液位: {{ card.otherInfo.jiyou_yewei }}</div>
              <div>报警代码: {{ card.otherInfo.alarm_no }}</div>
            </div>
            <div v-if="activeTab === tabs[2].id && card.otherInfo">
              <div>接口类型: {{ card.otherInfo.interface_type }}</div>
              <div>接口地址: {{ card.otherInfo.interface_address }}</div>
              <div>接口字段: {{ card.otherInfo.interface_field }}</div>
              <div>系统字段: {{ card.otherInfo.sys_field }}</div>
              <div>备注: {{ card.otherInfo.remark }}</div>
            </div>
            <div v-if="activeTab === tabs[3].id && card.otherInfo">
              <div>终端类型: {{ card.otherInfo.terminal_type }}</div>
              <div>终端品牌: {{ card.otherInfo.terminal_pinpai }}</div>
              <div>IMEI: {{ card.otherInfo.imei_no }}</div>
              <div>SIM: {{ card.otherInfo.sim_no }}</div>
              <div>SIM卡类型: {{ card.otherInfo.sim_type }}</div>
              <div>流量类型: {{ card.otherInfo.flow_type }}</div>
              <div>服务到期时间: {{ card.otherInfo.service_date }}</div>
              <div>流量到期时间: {{ card.otherInfo.flow_date }}</div>
            </div>
            <div v-if="activeTab === tabs[4].id && card.otherInfo">
              <div>导航品牌: {{ card.otherInfo.nav_brand }}</div>
              <div>导航类型: {{ card.otherInfo.nav_module }}</div>
              <div>安装时间: {{ card.otherInfo.install_date }}</div>
              <div>安装人员: {{ card.otherInfo.install_man }}</div>
              <div>导航设备号: {{ card.otherInfo.nav_no }}</div>
              <div>SIM: {{ card.otherInfo.sim_no }}</div>
              <div>流量类型: {{ card.otherInfo.flow_type }}</div>
              <div>服务到期时间: {{ card.otherInfo.service_date }}</div>
              <div>流量到期时间: {{ card.otherInfo.flow_date }}</div>
            </div>
            <div v-if="activeTab === tabs[5].id && card.otherInfo">
              <div>作业类型: {{ card.otherInfo.op_type }}</div>
              <div>作业路径: {{ card.otherInfo.op_path }}</div>
              <div>作业幅宽: {{ card.otherInfo.op_weight }}</div>
              <div>作业面积: {{ card.otherInfo.op_area }}</div>
              <div>作业轨迹: {{ card.otherInfo.op_track }}</div>
              <div>作业时间: {{ card.otherInfo.op_time }}</div>
            </div>
            <div v-if="activeTab === tabs[6].id && card.otherInfo">
              <div>摄像头品牌: {{ card.otherInfo.camera_brand }}</div>
              <div>摄像头序号: {{ card.otherInfo.camera_no }}</div>
              <div>摄像头名称: {{ card.otherInfo.camera_name }}</div>
              <div>摄像头接口: {{ card.otherInfo.camera_interface }}</div>
            </div>
            <div v-if="activeTab === tabs[7].id && card.otherInfo">
              <div>雷达品牌: {{ card.otherInfo.radra_brand }}</div>
              <div>雷达序号: {{ card.otherInfo.radra_no }}</div>
              <div>雷达名称: {{ card.otherInfo.radra_name }}</div>
            </div>
          </el-tab-pane>
        </template>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

/** 设备展示 页面 */

export default {
  data() {
    return {
      page: {
        size: 10,
        total: undefined,
        page: 1
      },
      search: '',
      list: [],
      snapshot: [],
      show: false,
      card: undefined,
      activeTab: 'equipment',
      tabs: [
        { label: '基础信息', id: 'equipment' },
        { label: '监测信息', id: 'equipmentMointor' },
        { label: '接口信息', id: 'equipmentInterface' },
        { label: '终端信息', id: 'equipmentTerminal' },
        { label: '导航信息', id: 'equipmentNav' },
        { label: '作业信息', id: 'equipmentOperation' },
        { label: '摄像头信息', id: 'equipmentCamera' },
        { label: '雷达信息', id: 'equipmentRadar' }
      ]
    }
  },
  watch: {
    search() {
      this.list = this.snapshot.filter(iter => {
        const regex = new RegExp(this.search, 'ig')
        return Object.entries(iter).some(([_, value]) => regex.test(value))
      })
      this.page.total = this.list.length
    }
  },
  created() {
    this.getDeviceList()
  },
  methods: {
    getDeviceList() {
      request
        .get('/api/v2/base/equip/equipment/list', {
          params: {
            page: this.page.page,
            size: this.page.size,
            field_id: 'equipmentOperation'
          }
        })
        .then(({ data }) => {
          this.page.total = data.total
          this.snapshot = this.list = data.list
        })
    },
    onTabClick(ev) {
      this.activeTab = ev.name
      if (ev.name === this.tabs[0].id) return (this.card.otherInfo = null)
      request(`/api/v2/base/equip/${ev.name}/list`, { params: { page: 1, size: 1, eq_id: this.card.id }}).then(
        ({ data: { list }}) => {
          this.card.otherInfo = list[0]
          this.$forceUpdate()
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  width: 100%;
  .el-input {
    margin-bottom: 8px;
    width: 200px;
  }
  .cardList {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    .card {
      display: flex;
      align-items: center;
      border-radius: 8px;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
      padding: 8px;
      cursor: pointer;
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        color: #666;
        font-size: 14px;
        line-height: 1.6;
        div {
          width: 250px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  >>> .el-dialog__body {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    .el-tabs {
      margin: 0;
      line-height: 1.6;
      .el-tab-pane {
        display: flex;
        > div {
          flex: 1;
        }
      }
    }
  }
}
</style>
